<template>
	<view class="pop-dialog" v-if="showDialog" :style="{'top': topPosition+ 'rpx','right': rightPosition+ 'rpx'}">
		<!-- 三角形  如果要定制的话，从这里找到css triangle进行修改 -->
		<div class="content">
			<view class="triangle" :style="{'margin-top':'-40rpx','margin-right':'4rpx','border-bottom-color':bgColor}"/>
			<view class="pop-body" :style="'background-color:'+bgColor+';'">
				<view class="pop-item" :class="index!==menuList.length-1?'border-b':''" v-for="(item,index) in menuList"
					v-bind:key="index" @click="onClickPopMenu(item, index)">
					<view class="uni_flex_row_align_left">
						<text class="uni_16px_400_colorfff" :style="index===current?'color:#e54d42':'color:'+textColor+';'">{{item.name}}</text>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			},
			textColor: {
				type: String,
				default: '#606266'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			lineColor: {
				type: String,
				default: '#606266'
			},
			isShow: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			top: {
				type: Number,
				default: 0
			},
			left: {
				type: Number,
				default: 0
			},
			right: {
				type: Number,
				default: 0
			},
			triangleMarginRight: {
				type: Number,
				default: 24
			}
		},
		data() {
			return {
				showDialog: false,
				menuList: [],
				topPosition: 0,
				rightPosition: 0,
				leftPosition: 0
			}
		},
		watch: {
			isShow: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.showDialog = newVal;
				}
			},
			list: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.menuList = newVal;
				}
			},
			top: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.topPosition = newVal;
				}
			},
			left: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.leftPosition = newVal;
				}
			},
			right: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.rightPosition = newVal;
				}
			},
		},
		methods: {
			onClickPopMenu(item, index) {
				this.$emit('onClickPopupItem', {...item, ix: index});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-dialog {
		z-index: 999;
		position: absolute;
		top: 40;
		right: 20;
		font-size: 14px;
		border-radius: 4px;
		box-shadow: 0 0 15px #aaa;

		.content {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
			position: relative;
			.triangle {
				width: 0;
				height: 0;
				border: 26rpx solid transparent;
				border-bottom-color: lightseagreen;
				position: absolute;
				top: 0;
				right: 0;
			}

			.pop-body {
				border-radius: 10px;
				padding: 12rpx;

				.pop-item {
					display: flex;
					flex-direction: column;
					padding: 12rpx;
				}

				.border-b {
					border-bottom: 1px #ccc solid;
				}
			}
		}



	}
</style>